   <link href="reports/examples/content/shared/styles/examples-offline.css" rel="stylesheet">
        <link href="reports/examples/content/shared/styles/kendo.common.min.css" rel="stylesheet">
        <link href="reports/examples/content/shared/styles/kendo.rtl.min.css" rel="stylesheet">
        <link href="reports/examples/content/shared/styles/kendo.default.min.css" rel="stylesheet">

        <script src="reports/js/jquery.min.js"></script>
        <script src="reports/js/kendo.web.min.js"></script>
        <script src="reports/js/console.js"></script>
       
            <select id="size">
                <option>S - 6 3/4"</option>
                <option>M - 7 1/4"</option>
                <option>L - 7 1/8"</option>
                <option>XL - 7 5/8"</option>
            </select>


        
              <script>
                $(document).ready(function() {
                   
                    $("#size").kendoDropDownList();

                    
                });
            </script>
    
    
  <script> 
    function show() { 
        if(document.getElementById('benefits').style.display=='none') { 
            document.getElementById('benefits').style.display='block'; 
        } 
        return false;
    } 
    function hide() { 
        if(document.getElementById('benefits').style.display=='block') { 
            document.getElementById('benefits').style.display='none'; 
        } 
        return false;
    }   
</script> 


 <div id="opener"><a href="#1" name="1" onclick="return show();">click here</a></div> 
    <div id="benefits" style="display:none;">some input in here plus the close button 
           <div id="upbutton"><a onclick="return hide();">click here</a></div> 
    </div> 

